<template>
  <div class="My">
    <div class="My_header">
      <header @click="$router.push('/login')" v-if="!token">
        <div class="img">
          <img src=" https://m.mi.com/static/img/avatar.76a75b8f17.png" />
        </div>
        <div class="name">登录/注册</div>
      </header>
      <header v-if="token">
        <div class="img">
          <img
            data-src="//s1.mi.com/m/images/m/default.png"
            src="//s1.mi.com/m/images/m/default.png"
            lazy="loaded"
          />
        </div>
        <div class="name">
          <p>破碎的晨心</p>
          <div class="account">ID:1264979972</div>
        </div>
      </header>
      <div class="setup">
        <i class="iconfont icon-shezhi" @click="show = true"></i>
      </div>
    </div>
    <div
      class="My_Orders"
      @click="
        $router.push({
          name: 'order',
          params: {
            name: '商品',
          },
        }).catch(()=>{})
      "
    >
      <div class="My_Order">我的订单</div>
      <div class="My_allOrder">
        全部订单 <i class="iconfont icon-xiangyou1"></i>
      </div>
    </div>
    <van-grid class="My_service" :border="false" :column-num="4">
      <van-grid-item
        @click="
          $router.push({
            name: 'order',
            params: {
              name: '待付款',
            },
          }).catch(()=>{})
        "
      >
        <i class="iconfont icon-duozhongzhifu"></i>
        <span>待付款</span>
      </van-grid-item>
      <van-grid-item
        @click="
          $router.push({
            name: 'order',
            params: {
              name: '待发货',
            },
          }).catch(()=>{})
        "
      >
        <i class="iconfont icon-wuliu"></i>
        <span>待发货</span>
      </van-grid-item>
      <van-grid-item>
        <i
          class="iconfont icon-fankui"
          @click="
            $router.push({
              name: 'order',
              params: {
                name: '待收货',
              },
            }).catch(()=>{})
          "
        ></i>
        <span>待收货</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-shouhou"></i>
        <span>退修换</span>
      </van-grid-item>
    </van-grid>
    <div style="border-bottom: 0.2rem solid #f5f5f5"></div>
    <div class="My_Others">
      <div class="My_Other" @click="showList = true">
        <i class="iconfont icon-wodeyouhui"></i>
        <span>我的优惠</span>
        <i class="iconfont icon-xiangyou1"></i>
      </div>
      <div class="My_Other">
        <i class="iconfont icon-kefuzhongxin"></i>
        <span>客服中心</span>
        <i class="iconfont icon-xiangyou1"></i>
      </div>
      <div class="My_Other" @click="$router.push('/address').catch(()=>{})">
        <i class="iconfont icon-zuobiaofill"></i>
        <span>收货地址</span>
        <i class="iconfont icon-xiangyou1"></i>
      </div>
      <div style="border-bottom: 0.2rem solid #f5f5f5"></div>
    </div>
    <div class="head_mark">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
        alt=""
      />
    </div>
    <div class="recommend_lists">
      <div
        class="recommend_list"
        v-for="(item, index) of recommend"
        :key="index"
        @click="$router.push('/details')"
      >
        <div class="list_img">
          <img :src="'https:' + item.image_url" />
        </div>
        <div class="list_info">
          <div class="list_name">{{ item.name }}</div>
          <div class="list_price price">
            ￥{{ item.price
            }}<del class="price" v-if="item.market_price !== item.price"
              >￥{{ item.market_price }}</del
            >
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
    <van-tabbar v-model="navActive" @change="onChange">
      <van-tabbar-item v-for="item of icon" :key="item.id">
        <span>{{ item.name }}</span>
        <template #icon="props">
          <i
            :class="['iconfont', props.active ? item.active : item.inactive]"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="Change"
        @exchange="onExchange"
      />
    </van-popup>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    >
      <ul class="setup">
        <li><span>隐私设置</span><i class="iconfont icon-xiangyou1"></i></li>
        <li>
          <span>小米商城隐私政策</span><i class="iconfont icon-xiangyou1"></i>
        </li>
        <li><span>关于商城</span><i class="iconfont icon-xiangyou1"></i></li>
        <li><span>意见反馈</span><i class="iconfont icon-xiangyou1"></i></li>
        <li><span>协议规则</span><i class="iconfont icon-xiangyou1"></i></li>
        <li><span>资质证照</span><i class="iconfont icon-xiangyou1"></i></li>
        <li>
          <span>小米商城用户协议</span><i class="iconfont icon-xiangyou1"></i>
        </li>
        <li>
          <span>小米账号用户协议</span><i class="iconfont icon-xiangyou1"></i>
        </li>
        <li>
          <span>小米账号隐私政策</span><i class="iconfont icon-xiangyou1"></i>
        </li>
      </ul>
      <van-button
      v-if="token"
        type="primary"
        block
        color="linear-gradient(to right, #ff6034, #ee0a24)"
        @click="quit"
        >退出登录</van-button
      >
       <van-button
       v-if="!token"
        type="primary"
        block
        color="linear-gradient(to right, #ff6034, #ee0a24)"
       @click="$router.push('/login')"
        >前往登录</van-button
      >
    </van-popup>
  </div>
</template>
<script>
const coupon = {
  available: 1,
  condition: "购买小米手机\n最多优惠120元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1640000000,
  endAt: 1640913394,
  valueDesc: "120",
  unitDesc: "元",
  token: null,
};
import Vue from "vue";
import { recommend } from "../assets/js/shuju.js";
import {
  Tabbar,
  TabbarItem,
  Grid,
  GridItem,
  CouponCell,
  CouponList,
  Popup,
  Button,
  Toast
} from "vant";
Vue.use(CouponList)
  .use(Popup)
  .use(Tabbar)
  .use(TabbarItem)
  .use(Grid)
  .use(GridItem)
  .use(CouponCell)
  .use(Button);
export default {
  name: "My",
  data() {
    return {
      navActive: 3,//导航索引
      icon: [
        {
          id: 1002,
          name: "首页",
          active: "icon-shouyefill",
          inactive: "icon-shouye",
        },
        {
          id: 1003,
          name: "分类",
          active: "icon-sousuoleimufill",
          inactive: "icon-sousuoleimu",
        },
        {
          id: 1004,
          name: "购物车",
          active: "icon-gouwuchefill",
          inactive: "icon-gouwuche",
        },
        {
          id: 1005,
          name: "我的",
          active: "icon-wodefill",
          inactive: "icon-wode",
        },
      ],//底部导航
      chosenCoupon: -1,
      coupons: [coupon],//优惠券
      disabledCoupons: [coupon],//优惠券
      showList: false,//列表显示
      show: false,//设置显示
      token: null,//token值
    };
  },
  methods: {
    //导航切换
    onChange() {
      let active = this.navActive;
      active == 0
        ? this.$router.push("/Home")
        : active == 1
        ? this.$router.push("/classification")
        : active == 2
        ? this.$router.push("/ShoppingCart").catch(()=>{})
        : active == 3
        ? this.$router.push("/My")
        : null;
    },
    //列表显示和索引
    Change(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    //优惠券
    onExchange(code) {
      this.coupons.push(coupon);
      console.log(code);
    },
    //退出登录
    quit(){
       window.sessionStorage.removeItem("token");
       Toast("退出成功")
       this.token =null
       this.show=false
    }
  },
  created() {
    //获取数据
    this.recommend = recommend;
    this.token = window.sessionStorage.getItem("token");
  },
};
</script>

<style lang="less" >
.My {
  .van-popup {
    overflow: hidden;
    .setup {
      font-size: 0.28rem;
      li {
        width: 100%;
        padding: 16px;
        overflow: hidden;
        border-radius: 8px;
        position: relative;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        color: #323233;
        font-size: 14px;
        line-height: 24px;
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        span {
          display: inline-block;
          flex: 1;
        }
        i {
          height: 24px;
          font-size: 16px;
          line-height: 24px;
          margin-left: 4px;
          color: #969799;
        }
      }
    }
    .van-button {
      position: fixed;
      bottom: 0;
      left: 0;
    }
  }
  .recommend_lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .recommend_list {
      flex: 0 0 49.5%;
      width: 49.5%;
      .list_img {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .list_info {
        padding: 0.18rem 0.26rem 0.22rem;
        .list_name {
          font-size: 0.28rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list_price {
          font-size: 0.32rem;
          color: #ff6700;
          margin-top: 0.1rem;
          del {
            font-size: 0.22rem;
            margin-left: 0.1rem;
            color: rgba(0, 0, 0, 0.54);
            text-decoration: line-through;
          }
        }
        .price {
          position: relative;
          padding-left: 0.5em;

          line-height: 1em;
        }
      }
    }
  }
  .head_mark {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .My_Others {
    .My_Other {
      height: 1rem;
      line-height: 1rem;
      padding: 0 0.5rem;
      display: flex;
      &:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
      }
      i {
        height: 100%;
        line-height: 1rem;
        &:first-child {
          color: #ff6700;
          font-size: 0.5rem;
        }
        &:last-child {
          color: rgba(0, 0, 0, 0.6);
        }
      }
      span {
        padding-left: 5%;
        display: inline-block;
        flex: 1;
        font-size: 0.28rem;
        line-height: 1rem;
        font-style: normal;
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
  .van-grid {
    .van-grid-item {
      .van-grid-item__content {
        i {
          font-size: 25px;
          color: #999999;
        }
        span {
          margin-top: 5px;
          font-size: 0.25rem;
        }
      }
    }
  }
  .My_header {
    background: url(https://m.mi.com/static/img/bg.63c8e19851.png) center 0
      #f37d0f;
    background-size: auto 100%;
    padding: 0.32rem 0;
    position: relative;
    .setup {
      position: absolute;
      top: 10%;
      right: 15%;
      i {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        color: hsla(0, 0%, 100%, 0.6);
        font-size: 0.55rem;
        &:last-child {
          margin-left: 0.4rem;
        }
      }
    }
    header {
      -webkit-box-align: center;
      align-items: center;
      display: flex;
      .img {
        margin: 0 0.16rem 0 0.32rem;
        width: 0.96rem;
        height: 0.96rem;
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 100%;
        border: 3px solid hsla(0, 0%, 100%, 0.4);
        text-align: center;
        img {
          width: auto;
          height: 100%;
          margin: 0 auto;
        }
      }
      .name {
        color: #fff;
        font-size: 0.24rem;
        text-align: left;
        .account {
          color: hsla(0, 0%, 100%, 0.6);
        }
      }
    }
  }
  .My_Orders {
    background-color: #fff;
    height: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.54);
    position: relative;
    padding-right: 0.4rem;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    .My_Order {
      font-size: 0.28rem;
      padding: 0 0 0 0.32rem;
      color: rgba(0, 0, 0, 0.87);
    }
    .My_allOrder {
      font-size: 0.24rem;
      color: rgba(0, 0, 0, 0.87);
      i {
        margin-left: 2px;
        font-size: 0.24rem;
        color: rgba(0, 0, 0, 0.87);
      }
    }
  }
  .van-tabbar--fixed {
    box-shadow: 0 5px 10px 2px rgb(0 0 0);
    .van-tabbar-item {
      i {
        font-size: 21px;
      }
    }
  }
  .van-tabbar-item--active {
    color: #ff6700;
    background-color: #fff;
  }
}
</style>